<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>区域管理</span>
        </div>
        <div>
          <div class="main">
            <div class="name">
              <div
                class="nameItem"
                v-for="(item, index) in nodeData"
                :key="index"
              >
                <span style="margin: 0 10px">
                  {{ item }}
                </span>
                <span
                  style="font-size: 12px; color: #ccc"
                  class="el-icon-arrow-right"
                ></span>
              </div>
            </div>
            <div>
              <div class="input" v-for="(item, index) in data" :key="index">
                <div style="width: 300px">
                  <el-input
                    placeholder="模块名称"
                    v-model="moduleName[index]"
                    class="input-with-select"
                  ></el-input>
                </div>
                <!-- <div style="width: 200px; margin-right: 20px">
                  <el-input
                    placeholder="市区编码"
                    v-model="code[index]"
                    class="input-with-select"
                  ></el-input>
                </div> -->
                <div class="btn" v-if="!item.id">
                  <el-button
                    class="el-icon-plus"
                    type="text"
                    size="medium"
                    @click="increment(index)"
                  >
                  </el-button>
                  <el-button
                    class="el-icon-close"
                    type="text"
                    size="medium"
                    @click="decrement(index)"
                  >
                  </el-button>
                </div>
              </div>
              <div>
                <!-- <el-button type="primary">保存</el-button> -->
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <div>
        <!-- {{ moduleName }} -->
      </div>
    </div>
  </div>
</template>

<script>
import { addData, deleteData } from "@/api/system/city.js";
import Bus from "../eventBus/bus.js";
export default {
  data() {
    return {
      data: [1, 2, 3, 4, 5],
      moduleName: [],
      id: [],
      nodeData: ["全国"],
      pid: "",
    };
  },
  created() {
    this.getData();
    this.getNodeData();
  },
  methods: {
    // 监听事件总线中data事件
    getData() {
      Bus.$on("data", (val, node) => {
        this.watchData(val, node);
      });
    },
    watchData(val, node) {
      this.data = [1, 2, 3, 4, 5];
      this.moduleName = [];
      // 去除新增小区的输入框
      if (node) {
        // 点击社区节点时，如果没有children数组
        // 将data清空不渲染输入框，不能新增小区
        if (node.level === 5 && !val.children) {
          this.data = [];
        }
        // 点击小区也需要清空data不渲染输入框
        if (node.level === 6) {
          this.data = [];
        }
      }
      // 获取输入框双向绑定值
      if (val) {
        for (const item of val) {
          if (item.children) {
            this.pid = val[0].pid;
            this.data.unshift(item);
            this.moduleName.push(item.name);
          } else {
            this.pid = val[0];
          }
        }
      }
    },
    // 监听nodeData事件获取面包屑数据
    getNodeData() {
      Bus.$on("nodeData", (val) => {
        this.nodeData = [];
        for (const item of val) {
          this.nodeData.push(item);
        }
      });
    },
    // 增加按钮
    increment(index) {
      if (this.moduleName[index]) {
        this.addData(this.moduleName[index], this.pid);
      } else {
        this.data.push(index);
        //this.$modal.msgError("请输入数据");
      }
    },
    // 新增数据
    addData(name, pid) {
      const data = {
        name,
        pid,
      };
      addData(data).then((res) => {
        if (res.code == 200) {
         this.$modal.msgSuccess("添加成功");
          Bus.$emit("update");
        }
      });
    },
    decrement(index) {
      this.data.pop(index);
    },
  },
};
</script>

<style lang='scss' scoped>
.main {
  display: flex;
  align-items: center;
  min-width: 730px;
  .name {
    display: flex;
    flex-wrap: wrap;
    // width: 300px;
    margin-right: 20px;
    .nameItem {
      display: flex;
      align-items: center;
    }
  }
  .input {
    display: flex;
    margin: 10px 0;
    .btn {
      display: flex;
      justify-content: center;
      margin-left: 20px;
      button {
        width: 33px;
        color: #000;
      }
      button:hover {
        background-color: #ccc;
      }
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
